<template>
  <div>
    <div class="processManagement">
      <!-- 标题 -->
      <div class="processManagement-title">工序管理</div>

      <!-- 条件筛选 -->
      <div class="processManagement-condition">
        <div class="processManagement-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>
        <div class="processManagement-condition-btn">
          <!-- <el-button v-if="select" @click="back()">添加</el-button> -->
          <el-button @click="getProcessByPage()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
          <el-button @click="drawer = true">新增</el-button>
          <el-button v-if="select" @click="back()">添加</el-button>
        </div>
      </div>


      <!-- 表格 -->
      <div class="processManagement-report">
        <normal-table
          ref="table"
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>

      <!-- 新增工艺-抽屉 -->
      <el-drawer
        title="新增工艺"
        :visible.sync="drawer"
        :direction="'rtl'">
        <normal-form
          :formModel="addFormModel"
          :config="addConfig"
          :plus="plus"/>
        <div class="drawer-btn">
          <el-button type="primary" @click="createProcess()">确认</el-button>
        </div>

      </el-drawer>


    </div>
  </div>
</template>

<script>
import NormalForm from '@/components/NormalForm'
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  name: 'processManagement',
  components: {
    NormalTable,
    NormalFormPlus,
    NormalForm
  },
  mounted() {
    this.getProcessByPage()
    if (this.$route.query.select) {
      this.operationConfig.select = true
      this.select = true
      this.linkProcessAndModelModel.id = this.$route.query.id
      this.linkProcessAndModelModel.type = this.$route.query.type

    }
  },
  data() {
    return {
      linkProcessAndModelModel: {
        id: '',
        type: '',
      },
      select: false,
      // 新增碳足迹报告-数据
      addFormModel: {
        name: "",//	工序名称
        productName: "" //	工序主产物名称
      },
      addConfig: [
        {
          id: '1',
          type: 'input',
          model: 'name',
          name: '工艺名称',
          edit: true,
          props: {
            placeholder: '请输入工艺名称',
          }
        },
        {
          id: '2',
          type: 'input',
          model: 'productName',
          name: '工序主产物',
          edit: true,
          props: {
            placeholder: '工序主产物',
          }
        },
      ],
      plus: {},
      drawer: false,
      formModel: {
        name: "", // 工序名称
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 6,
              model: 'name',
              name: '',
              props: {
                placeholder: "工序名称",

              }
            },
          ]
        },
      ],
      plus: {},
      tableData: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }

      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name",
          label: "工艺名称",
          // width:200
        },
        {
          prop: "productName",
          label: "工序主产物名称"
        },
        {
          prop: "@createTime",
          label: "创建时间",
          // width:200
        },
      ],

    }
  },
  methods: {
    // 将选中的工序添加到对应的模型中
    back() {
      var selectLi = this.getSelection()
      if (selectLi && selectLi.length > 0) {
        this.linkProcessAndModel(selectLi[0].id)
      }
      console.log(selectLi)
    },
    // 连接工序和模型
    linkProcessAndModel(processId) {
      this.$API.product.linkProcessAndModel({
        processId: processId,
        modelId: this.linkProcessAndModelModel.id,
        periodName: this.linkProcessAndModelModel.type
      }).then(response => {
        this.$router.push(
          {
            path: "/carbonFootprintVerification/productCarbonAccounting/addProductCarbonAccounting",
            query: {
              id: this.linkProcessAndModelModel.id
            }
          }
        )
      })
    },
    // 获取选中的表单
    getSelection() {
      return this.$refs.table.getSelection()
    },
    // 重置表单
    reset() {
      this.formModel.name = ""
      this.paginationConfig.page = 1
      this.getProcessByPage()
    },
    // 创建工序
    createProcess() {
      this.drawer = false
      this.$API.product.createProcess({
        ...this.addFormModel,
      }).then(response => {
        this.getProcessByPage()
        this.addFormModel = {
          name: "",//	工序名称
          productName: "" //	工序主产物名称
        }
      })
    },
    // 获得工序列表
    getProcessByPage() {
      if (this.$MOCK.mock) {
        this.tableData = this.$MOCK.product.processList.data.list
        this.paginationConfig.total = this.$MOCK.product.processList.data.total
        return
      }
      this.$API.product.getProcessByPage({
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
        name: this.formModel.name == "" ? null : this.formModel.name//	工序名称
      }).then(response => {
        this.tableData = response.data.list
        this.paginationConfig.total = response.data.total
      })

    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {
        this.$router.push({
          path: "/carbonFootprintVerification/processManagement/addProcessManagement",
          query: {processId: row.id, name: row.name}
        })
      }
    },
    // 分页点击事件
    changePage() {
      this.getProcessByPage()
    },
  }
}
</script>

<style lang="less" scoped>
.drawer-btn {
  margin-left: 150px;
}

.processManagement {

  height: 1680px;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .processManagement-title {
    font-size: 16px;
    font-weight: bold;
  }

  .processManagement-condition {
    display: flex;

    .processManagement-condition-form {
      flex: 3;
    }

    .processManagement-condition-btn {
      flex: 1;
      margin-left: -100px;
    }
  }

  // 核算报告表格
  .processManagement-report {
    .processManagement-history-title {
      font-size: 14px;
    }
  }
}
</style>
